<template>
	<view class="content">
		<!-- 菜单 -->
		<view class="option-menu unify-flex unify-background-color" v-if="isOpenTakeOut && isOpenArrive">
			<view class="item unify-relative" v-for="(item,index) in (affirmOrderMenu && affirmOrderMenu.optionMenu)" :key="index" @tap="tapMenu(item.id)">
				<view class="item-nk unify-weight unify-absolute" :class="{'item-nk-active': isIndex === item.id, 'item-nk-radius1': item.id === 1, 'item-nk-radius2': item.id === 0}">
					<view class="item-back unify-absolute" :class="'bg-' + themeColor.name" v-if="isIndex === item.id"></view>
					<text class="unify-relative">{{item.name}}</text>
				</view>
			</view>
		</view>
		
		<!-- 地址 -->
		<view>
			<!-- 收货地址 -->
			<uni-order-shipping-address v-if="isOpenTakeOut && isIndex === 0" :address="address"></uni-order-shipping-address>
			
			<!-- 商家地址 -->
			<uni-order-shop-nav v-if="isOpenArrive && isIndex === 1"></uni-order-shop-nav>
			
			<!-- 分割线 -->
			<uni-cut-off-rule></uni-cut-off-rule>
		</view>

		<!-- 间隔 -->
		<uni-interval></uni-interval>

		<!-- 商品 -->
		<view class="order-goods unify-background-color">
			<uni-order-goods :isTakeOut="isIndex" :affirmOrderMenu="affirmOrderMenu" :isOpenTakeOut="isOpenTakeOut" :carList="carList" :totalPrice="totalPrice"></uni-order-goods>
		</view>

		<!-- 间隔 -->
		<uni-interval></uni-interval>

		<!-- 其他 -->
		<view class="order-rests unify-background-color" v-if="isOpenTakeOut && isIndex !== 1">
			<view class="remark">
				添加备注：
			</view>
			<textarea placeholder-style="color:#cfcbce" placeholder="请输入您需要备注的信息" v-model="remark" class="remarks"/>

			
			<!-- <uni-order-rests :affirmOrderMenu="affirmOrderMenu" @click="tapOption"></uni-order-rests> -->
		</view>

		<!-- 底部按钮 -->
		<uni-base-btn :totalPrice="totalPrice" @tap="tapSubmit"></uni-base-btn>
		
		<!-- 餐具选择窗口 -->
		<uni-tableware-window ref="uniTablewareWindow" :show="show" :optionMenu="affirmOrderMenu"></uni-tableware-window>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				totalPrice:6,
				remark:null,
				carList:[],
				affirmOrderMenu: this.$mConstDataConfig.affirmOrderMenu,
				isOpenTakeOut: this.$mSettingConfig.isOpenTakeOut, // 是否开启外卖
				isOpenArrive: this.$mSettingConfig.isOpenArrive, // 是否开启到店
				isIndex: this.$mSettingConfig.isOpenTakeOut? 0: 1,
				show: false,	// 是否显示
				address:{}
			}
		},
		onLoad(options) {
			let query;
			// #ifdef MP
			query = this.$parseURL(options.query)
			// #endif
			// #ifdef APP-PLUS || H5
			query = this.$mUtils.jsonParse(options.query, 1)
			// #endif
			this.carList = query.data;
			// console.log(this.carList)
			this.getDefaultAddress()
		},
			
		computed:{
			totalSum(){
				this.countTotalPrice()
			}
			
		}
		,
		methods: {
			//获取默认地址
			getDefaultAddress(){
				this.$https({
					url:"/address/default",
					method:"get",
					success:(res)=>{
						this.address=res.data
					}
				})
			},
			// 菜单切换
			tapMenu(e) {
				this.isIndex = e;
			},
			
			// 餐具选择
			tapOption() {
				this.show = true;
				setTimeout(() => {
					this.$refs.uniTablewareWindow.updateShow()
				}, 10)
			},
			countTotalPrice() {
				let price = 0,
					totalNum = 0,
					cartList = this.carList
					cartList.forEach((item2, index2) => {
					totalNum +=Number(item2.number)
					price += Number(item2.number) * item2.amount
				})
				this.totalPrice = price;
				this.goodsNum = totalNum
			},
			tapSubmit(){
				const that=this;
				that.$https({
					url:"/order/submit",
					method:"post",
					data:{
						storeId:that.carList[0].storeId,
						remark:that.remark,
						// payMethod:res.tapIndex+1,
						addressBookId:that.address.id
					},
					success:(res)=>{
						
						const amount=res.data.amount
						const orderId=res.data.id
						uni.navigateTo({
							url:'/pages/orderSuccess/orderSuccess?id='+orderId+'&amount='+amount
						})
						
						
					}
				})
				
			},
			
			
		}
	}
</script>

<style lang="scss" scoped>
	// 菜单
	.option-menu {
		height: 96rpx;
		padding: 0 30rpx;
		
		.item {
			flex: 1;
			
			.item-nk {
				width: 100%;
				height: 64rpx;
				line-height: 64rpx;
				text-align: center;
				bottom: 0;
				
				overflow: hidden;
				font-size: $uni-font-size-sm;
				
				.item-back {
					width: 100%;
					height: inherit;
					opacity: .2;
				}
			}
			
			.item-nk-radius1 {
				border-radius:  0 30rpx 0 30rpx;
			}
			
			.item-nk-radius2 {
				border-radius: 30rpx 0 30rpx 0;
			}
			
			.item-nk-active {
				font-size: $uni-font-size-base;
			}
		}
	}
	.remark{
		padding: 20px;
		font-size: 20px;
	}
	.remarks{
		margin-left: 20px;
	}
</style>
